<script setup lang='ts'>
import { onMounted, ref } from 'vue';

// 定义响应式变量
const defaultImgUrl = ref('')
const name = ref('')
const imgList: string[] = [
    "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0828%2F5a2863a7j00six00d000hd200a6009yg00a6009y.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
    "https://img2.baidu.com/it/u=1344414611,1414589098&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=285",
    "http://img1.baidu.com/it/u=3615554588,1533818780&fm=253&app=138&f=JPEG?w=500&h=555",
    "http://img1.baidu.com/it/u=3288390176,2781953877&fm=253&app=138&f=JPEG?w=520&h=500",
    "http://img2.baidu.com/it/u=2294394091,1356641831&fm=253&app=138&f=JPEG?w=500&h=666",
    "https://pic.rmb.bdstatic.com/bjh/64e266aecf8d34763a497514e6d7a7b22954.jpeg@h_1280",
    "https://q8.itc.cn/q_70/images01/20240204/2f89f0d12c0f4d76bf50b6e7b56ab368.jpeg",
    "https://img2.baidu.com/it/u=1894203907,2858592961&fm=253&fmt=auto&app=138&f=JPEG?w=682&h=612"
]
const changeImage = () => {
    defaultImgUrl.value = imgList[~~(imgList.length * Math.random())]
}
// 组件挂载时调用 changeImage 函数
onMounted(() => {
    changeImage()
})
</script>
<!-- 数据驱动视图更新 鸿蒙 小程序 Vue React Angular -->
<template>
    <div class="container">
        <!-- v-bind / : -->
        <img :src="defaultImgUrl" alt="搞笑图片"><br>
        <button @click="changeImage">切换图片</button><br>
        <input type="text" :value="name"><br>
        <button @click="name = '宝贝'">修改值</button>
    </div>

</template>

<style scoped>
.container {
    width: 100%;
    text-align: center;
    margin: 100px auto;
    /* 下面这个方法间距确实增加,但是宽度和容器组件相等 */
    /* display: flex;
    flex-direction: column;
    gap: 10px; */
}

.container img {
    width: 300px;
    height: 300px;
}
</style>